<template>
  <div id="user-add" v-loading="loading">
    <div class="add-user-btn">
      <el-button @click="addUser">添加管理员</el-button>
    </div>
    <BlogTabs :list="list">
      <template v-slot:addManage>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="头像">
            <template slot-scope="scope">
              <div class="user-img">
                <img src="~@/assets/img/user.jpg" :alt="scope.row.img" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="账号">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>
          <el-table-column label="注册时间">
            <template slot-scope="scope">
              {{ $utils.formatDateTimeYMD(scope.row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" disabled type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <add-dialog ref="add" />
      </template>
    </BlogTabs>
  </div>
</template>

<script>
import addDialog from './add-dialog-item.vue'
export default {
  components: {
    addDialog
  },
  created() {
    this.getData()
  },
  data() {
    return {
      loading: false,
      tableData: [],
      list: [
        {
          name: 'addManage',
          label: '添加管理员',
          id: 1
        }
      ]
    }
  },
  methods: {
    clickShow() {},
    addUser() {
      // this.$refs.add.showDialog()
      this.$message.success('暂时不提供')
    },
    getData() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('/admin/allAdmins'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.tableData = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    handleDelete(row) {
      this.$confirm(`确认删除【${row.name}】用户？`).then(() => {
        this.$message.success('删除成功')
        // this.$ajax({
        //   url: this.$ajax.setUrl(`url/${row.id}`),
        //   method: 'delete',
        //   params: this.$ajax.setParams()
        // }).then(({ data }) => {
        //   if (data && data.code === '0') {
        //     this.getList()
        //     this.$message.success(data.data || data.msg)
        //   } else {
        //     this.$message.error(data.data || data.msg)
        //   }
        // })
      })
    }
  }
}
</script>

<style lang="scss">
#user-add {
  position: relative;
  .add-user-btn {
    position: absolute;
    right: 0px;
    z-index: 88;
  }
  .user-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
